<template>
  <div class="index page vbox">
    <search v-model="search.keyword" @focus="isSearch = true" @cancel="isSearch = false"/>
    <keep-alive>
      <!-- <history v-if="isSearch" :keyword.sync="search.keyword"></history> -->
      <history v-if="isSearch" v-model="search.keyword"></history>
      <list :is-search="isSearch" v-else/>
      <!-- <component v-for="comp in componentsList" :is="getComponent(comp)" :data="comp"getComponent/> -->
    </keep-alive>
  </div>
</template>
<script>
import Search from "@comp/search";
import List from "./components/list";
import History from "./components/history";

export default {
  data() {
    return {
      search: {
        keyword: ""
      },
      isSearch: false,
      goods: {}
    };
  },
  provide() {
    return {
      isSearch2: this.isSearch
    };
  },
  computed: {
    is() {
      return this.isSearch ? History : List;
    }
  },
  props: {},
  watch: {},
  methods: {
    getComponent(comp){
      switch(comp.type){
        case 'GOODS':
          return GOODS;
      }
    }
  },
  components: {
    Search,
    List,
    History
  },
  mounted() {
    //  this.goods = await this.$api.goods.list();
    this.$api.goods.list().then(goodsList => {
      this.goodsList = goodsList;
    });
  }
};
</script>
<style lang="less">
.index {
  background-color: #f5f4f5;

  //
}
</style>